<template>
  <div>
    <i-panel title="标签列表">
      <i-checkbox-group :current="current" @change="handleFruitChange">
        <i-checkbox v-for="item in all_data" :position="position" :key="item.id" :value="item.name" :disabled="item.checked">
        </i-checkbox>
      </i-checkbox-group>
    </i-panel>

    <i-button @click="handleDel" type="ghost">选中删除</i-button>
    <i-button @click="handleAdd" type="ghost">新增标签</i-button>

    <i-modal title="新增标签" :visible="modal_visible" @ok="handleModalOK" @cancel="handleModalCancel">
      <i-input :value="new_label_name" type="text" title="标签名称" placeholder="请输入标签名称" i-class="my-input" required/>
    </i-modal>

    <i-toast id="toast" />
  </div>
</template>

<script>
  import { getToken } from '@/utils/index';
  import { $Toast} from '../../../static/iview/base/index';

  export default {
    data () {
      return {
        'all_data': [{'id': 1, 'name': '香蕉'}, {'id': 2, 'name': '苹果'}, {'id': 3, 'name': '西瓜'}, {'id': 4, 'name': '葡萄'}],
        'current': [],
        'position': 'left',
        'animal': '熊猫',
        'checked': false,
        'disabled': false,
        'modal_visible':false,
        'new_label_name':''
      }
    },
    onReady(){
      this.getUserLabel();

      const pages = getCurrentPages();
      console.log("onReady", pages);
      const ctx = pages[pages.length - 1];
      console.log(ctx.selectComponent("#toast"));
    },
    methods: {
      setData (data) {
        Object.keys(data).forEach(key => {
          this[key] = data[key]
        })
      },
      handleFruitChange ({mp: { detail = {} }}) {
        const index = this.current.indexOf(detail.value);
        index === -1 ? this.current.push(detail.value) : this.current.splice(index, 1);
        this.setData({
          current: this.current
        })
      },
      handleDel () {
        console.log("handleDel",this.current);
        let _self = this;
        this.$http.post('/label/del_labels',
          {
            label_names:this.current
          },
          {
            headers:{
              Authorization: getToken()
            }
          })
          .then(function(response){
            for(let i = 0 ; i < _self.all_data.length; i ++){
              for(let j = 0 ; j < _self.current.length ; j ++){
                if(_self.all_data[i].name === _self.current[j]){
                  _self.all_data.splice(i,1);
                }
              }
            }
            _self.current = [];
          })
          .catch(function(response){
            console.log(response);
          });
      },
      handleAdd () {
        this.modal_visible = true;
        this.new_label_name = ''+parseInt(Math.random()*1000+1);
      },
      handleModalOK(){
        let _self = this;
        if(this.new_label_name.length === 0){
          $Toast({
            content: "标签名不能为空"
          });
          return;
        }
        this.$http.post('/label/add_label',
          {
            label_name:this.new_label_name
          },
          {
            headers:{
              Authorization: getToken()
            }
          })
          .then(function(response){
            if(response.data.status !== 200){
              $Toast({
                content: response.data.message
              });
              return;
            }
            _self.modal_visible = false;
            _self.getUserLabel();
          })
          .catch(function(response){
            console.log(response);
          });
      },
      handleModalCancel(){
        this.modal_visible = false;
      },
      handleAnimalChange ({mp: { detail = {} }}) {
        this.setData({
          checked: detail.current
        })
      },
      getUserLabel(){
        // console.log("getUserLabel",getToken());
        let _self = this;
        //获取标签列表
        this.$http.post('/label/get_labels',{},{
            headers:{
              Authorization: getToken()
            }
          })
          .then(function(response){
            console.log("get_labels response",response.data.data);
            let _data = response.data.data;
            _self.all_data = [];
            _self.current = [];
            for(let i = 0 ; i < _data.length; i ++){
              let _item = _data[i];
              let _new_tag = {};
              _new_tag['id'] = _item['id'];
              _new_tag['name'] = _item['label_name'];
              _new_tag['checked'] = _item['checked'];
              _self.all_data.push(_new_tag);
            }
            console.log("get_labels all_data",_self.all_data);
          })
          .catch(function(response){
            console.log(response);
          });
      }
    }
  }
</script>

<style>
  .my-input{
    border-radius:5px;
    outline:none;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border:1px solid #a1a1a1;
  }

</style>
